<template>
  <v-chart :option="option"></v-chart>
</template>

<script setup>
import { ref, onMounted } from 'vue';
// 引入echarts的baidu地图扩展
import 'echarts/extension/bmap/bmap.js';
import { getMapData } from '@/api/index.js';

const option = ref({});

const renderChart = (scatterData, effectScatterData, styleJson) => {
  option.value = {
    // 使用baidu地图做为底图
    bmap: {
      key: '9mME0XHuU6tax4saBPOf89bRsnmApUkV', // 申请的baidu地图ak
      center: [108.954355, 34.346721], // 地图中心点坐标
      zoom: 5, // 地图的缩放级别(默认值5)
      roam: true, // 是否开启鼠标缩放和平移漫游
      //自定义地图的样式, 从json文件中导入
      mapStyle: {
        styleJson: styleJson,
      },
    },
    title: {
      text: '外卖网点地图',
      left: 'center',
    },
    // 全局的提示框组件
    tooltip: {},
    // 系列列表
    series: [
      {
        //scatter:普通散点图
        type: 'scatter',
        name: '外卖',
        coordinateSystem: 'bmap', // 指定使用百度地图做为坐标系
        // 对于地图类型的data格式: [{name: '北京', value: [经度, 纬度, 销售额]}]
        data: scatterData,
        // 指定第三个维度为值
        encode: {
          value: 2,
        },
        // 自定义散点的大小, 销售额 / 10
        symbolSize(value) {
          return value[2] / 10;
        },
      },
      {
        //effectScatter:带动效(涟漪效果)的散点图
        type: 'effectScatter',
        name: '外卖TOP10',
        // 指定使用百度地图做为坐标系
        coordinateSystem: 'bmap',
        // 对于地图类型的data格式: [{name: '北京', value: [经度, 纬度, 销售额]}],按照销售额从大到小的排序,取前10个
        data: effectScatterData,
        // rippleEffect:涟漪效果
        encode: {
          value: 2, // 指定第三个维度为值
        },
        // 自定义散点的大小, 销售额 / 10
        symbolSize(value) {
          return value[2] / 10;
        },
        //设置涟漪效果
        rippleEffect: {
          //brushType: 画布类型,可以是 fill（填充）或 stroke（描边）。
          brushType: 'stroke',
          color: 'purple',
        },
        // 设置局部的提示框的样式
        tooltip: {
          formatter(params) {
            return `${params.name}<br/>销售额: ${params.value[2]}`;
          },
          textStyle: {
            color: 'green',
          },
        },
        itemStyle: {
          color: '#5270D4',
        },
      },
    ],
  };
};

const converData = obj => {
  const res = [];
  const { city, geodata } = obj;
  city.forEach(item => {
    const geo = geodata[item.name];
    if (geo) {
      res.push({
        name: item.name,
        value: [...geo, item.value],
      });
    }
  });
  return res;
};

onMounted(async () => {
  const res = await getMapData();
  // import函数导入一个module(模块), 返回Module对象
  const styleJson = await import('./mapStyle.json');
  // console.log(res);
  // console.log(converData(res))
  // console.log(styleJson);
  const scatterData = converData(res);
  // 按照销售额从大到小的排序,取前10个
  const effectScatterData = scatterData.sort((a, b) => b.value[2] - a.value[2]).slice(0, 10);

  // 在异步导入 JSON 文件时，使用 default 属性来访问导入的内容。
  renderChart(scatterData, effectScatterData, styleJson.default);
});
</script>

<style scoped></style>
